<template>
  <div id="home">
    <van-nav-bar>
      <template #left>
        <h3>系统首页</h3>
      </template>
      <template #right>
        <van-icon name="chat-o" size="24" badge="9" />
      </template>
    </van-nav-bar>

<!--    <van-swipe :autoplay="3000" indicator-color="white">-->
<!--      <van-swipe-item v-for="img in imgList" :key="img.id" @click="toCourseHandle(img.id)">-->
<!--        <img style="width: 100%" :src="img.url" />-->
<!--      </van-swipe-item>-->
<!--    </van-swipe>-->

    <van-notice-bar
      color="#f60"
      background="#ffffff"
      left-icon="volume-o"
      text="在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。"
      mode="link"
    />

    <van-grid :column-num="2" :gutter="5" clickable>
      <van-grid-item v-for="menu in menuList" :to="menu.url">
        <div slot="default" class="content-box">
          <van-icon class-prefix="my-icon" :name="menu.icon"></van-icon>
          <div class="right">
            <div class="title">{{menu.name}}</div>
            <div class="desc">{{menu.desc}}</div>
          </div>
        </div>
      </van-grid-item>
    </van-grid>
  </div>
  <TabBar />
</template>
<script>
import { useRouter } from "vue-router";
import TabBar from "@/components/layout/tab-bar";
import NavBar from "@/components/layout/nav-bar";
import { reactive, toRefs } from "vue"
export default {
  components: {
    NavBar,
    TabBar
  },
  setup() {
    const router = useRouter();
    const state = reactive({
      loading: false,
      imgList : [
        {id: "1", url: "https://bearwind-education.oss-cn-hangzhou.aliyuncs.com/course/mmexport1624930494824.jpg"},
        // {id: "2", url: "https://bearwind-education.oss-cn-hangzhou.aliyuncs.com/course/mmexport1624930541055.jpg"},
        // {id: "3", url: "https://bearwind-education.oss-cn-hangzhou.aliyuncs.com/course/mmexport1624930364055.jpg"},
      ],
      menuList : [
        {name: "模拟考试",url: "/simulation",desc:"仿真考试练习", icon: 'jiudian1'},
        {name: "组卷练习",url: "/combination",desc:"超大题库全面练习", icon: 'qianggoumiaosha1'},
        {name: "章节练习",url: "/chapter",desc:"难度递进针对练习", icon: 'lipin1'},
        {name: "收藏题库",url: "/collection",desc:"定向收藏试题", icon: 'qiandan11'},
        {name: "错题重练",url: "/wrong",desc:"错题重练加深印象", icon: 'qianbao1'},
        {name: "学习资料",url: "/material",desc:"提前做好考试准备", icon: 'tuandui1'},
        {name: "每日一练",url: "/test",desc:"提前做好考试准备", icon: 'canyin1'},
        {name: "成绩查询",url: "/exam-record",desc:"实时掌握考试成绩", icon: 'shucai1'}
      ],
    })

    const toCourseHandle = (value) =>{
      console.log(value)
    }

    const toMenuHandle= (url) => {
      router.push({
        path: url,
        query: {
          name: url
        }
      })
    }

    return {
      ...toRefs(state),
      toCourseHandle,
      toMenuHandle
    }
  },
}
</script>

<style lang="less" scoped>
#home{
  text-align: center;
}

/deep/.van-grid-item .van-grid-item__content {
  padding: 0.5rem;
}

.content-box {
  display: flex;
  width: 100%;
  text-align: left;
  img {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    margin: 0 auto;
  }
  .right {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding-left: 12px;
    .title {
      font-size: 16px;
      font-weight: bold;
      padding-top: 5px;
      color: #333333;
    }
    .desc {
      font-size: 12px;
      color: #969696;
    }
  }
}
</style>
